{%load static%}
<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
    <title>Sprint - Free Responsive Template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    {% load static %}
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet">

    <link rel="stylesheet" href="{% static 'css/home/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/home/normalize.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/home/font-awesome.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/home/animate.css' %}">
    <link rel="stylesheet" href="{% static 'css/home/templatemo_misc.css' %}">
    <link rel="stylesheet" href="{% static 'css/home/templatemo_style.css' %}">

    <script src="{% static 'js/home/vendor/modernizr-2.6.2.min.js' %}" type="text/javascript"></script>

</head>
<body>
    {% load static %}
    <!--[if lt IE 7]>
    <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
    <![endif]-->
	<!--  Free HTML5 Template by https://www.webmoban.net -->
    <div id="front">
        <div class="site-header">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 col-sm-6 col-xs-6">
                        <div id="templatemo_logo" style="background-size: 100px 100px ;background-image: url({% static 'image/home/Fatinn.gif' %});">
                            <h1><a href="#" title="HTML5 Template">Fatinn</a></h1>
                        </div> <!-- /.logo -->
                    </div> <!-- /.col-md-4 -->
                    <div class="col-md-8 col-sm-6 col-xs-6">
                        <a href="#" class="toggle-menu"><i class="fa fa-bars"></i></a>
                        <div class="main-menu">
                            <ul>
                                <li><a href="#front">Home</a></li>
                                <li><a href="#services">Services</a></li>
                                <li><a href="#contact">Contact</a></li>
                            </ul>
                        </div> <!-- /.main-menu -->
                    </div> <!-- /.col-md-8 -->
                </div> <!-- /.row -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="responsive">
                            <div class="main-menu">
                                <ul>
                                    <li><a href="#front">Home</a></li>
                                    <li><a href="#services">Services</a></li>
                                    <li><a href="#contact">Contact</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div> <!-- /.container -->
        </div> <!-- /.site-header -->
    </div> <!-- /#front -->

    <div class="site-slider">
        <ul class="bxslider">
            <li>
                <img src="{% static 'image/home/slider/slide1.jpg' %}" alt="slider image 1">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 text-right">
                            <div class="slider-caption">
                                <h2>fat1nn.top</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <img src="{% static 'image/home/slider/slide2.jpg' %}" alt="slider image 2">
                <div class="container caption-wrapper">
                    <div class="slider-caption">
                        <h2>Just for saying</h2>
                    </div>
                </div>
            </li>
            <li>
                <img src="{% static 'image/home/slider/slide3.jpg' %}" alt="slider image 3">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 text-right">
                            <div class="slider-caption">
                                <h2>Mobile Ready</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <img src="{% static 'image/home/slider/slide4.jpg' %}" alt="slider image 4">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 text-right">
                            <div class="slider-caption">
                                <h2>Responsive Layout</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <img src="{% static 'image/home/slider/slide5.jpg' %}" alt="slider image 5">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 text-right">
                            <div class="slider-caption">
                                <h2>FOR FREE</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul> <!-- /.bxslider -->
        <div class="bx-thumbnail-wrapper">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div id="bx-pager">
                            <a data-slide-index="0" href=""><img src="{% static 'image/home/slider/thumb1.jpg' %}" alt="image 1" /></a>
                            <a data-slide-index="1" href=""><img src="{% static 'image/home/slider/thumb2.jpg' %}" alt="image 2" /></a>
                            <a data-slide-index="2" href=""><img src="{% static 'image/home/slider/thumb3.jpg' %}" alt="image 3" /></a>
                            <a data-slide-index="3" href=""><img src="{% static 'image/home/slider/thumb4.jpg' %}" alt="image 4" /></a>
                            <a data-slide-index="4" href=""><img src="{% static 'image/home/slider/thumb5.jpg' %}" alt="image 5" /></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- /.site-slider -->

    <div id="services" class="content-section">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <div class="service-item">
                        <span class="service-icon first" style="background-image: url({% static 'image/home/service-first.png' %});" onclick="window.location.href='{% url "movieindex" %}'"></span>
                        <h3>豆瓣影评</h3>
                        <p>Cras congue orci at diam condimentum, in dignissim tellus elementum. Praesent id mauris eu urna vehicula rutrum sed in elit. Sed sed urna porta, viverra lacus in.</p>
                    </div> <!-- /.service-item -->
                </div> <!-- /.col-md-3 -->
                <div class="col-md-3 col-sm-6">
                    <div class="service-item">
                        <span class="service-icon second" style="background-image: url({% static 'image/home/service-second.png' %});" onclick="window.location.href='{% url 'searchroomindex' %}'" ></span>
                        <h3>查询教室</h3>
                        <p>Nulla in nunc elit. Etiam porttitor nibh et felis molestie fermentum. Ut quis diam porttitor, dictum dolor in, volutpat nulla. Phasellus egestas eu lacus eu pharetra.</p>
                    </div> <!-- /.service-item -->
                </div> <!-- /.col-md-3 -->
                <div class="col-md-3 col-sm-6">
                    <div class="service-item">
                        <span class="service-icon third" style="background-image: url({% static 'image/home/service-third.png' %});"></span>
                        <h3>High Quality</h3>
                        <p>Sprint is <a href="#">free responsive template</a> using HTML5 CSS3 based on Bootstrap framework. Feel free to download, edit and use it for your websites.</p>
                    </div> <!-- /.service-item -->
                </div> <!-- /.col-md-3 -->
                <div class="col-md-3 col-sm-6">
                    <div class="service-item">
                        <span class="service-icon fourth" style="background-image: url({% static 'image/home/service-fourth.png' %});"></span>
                        <h3>Professional Design</h3>
                        <p>Morbi id nisi enim. Ut congue interdum pharetra facilisi. Aenean consectetur pellentesque mauris nec ornare. Nam tortor justo, rutrum ut condimentum.</p>
                    </div> <!-- /.service-item -->
                </div> <!-- /.col-md-3 -->
            </div> <!-- /.row -->
        </div> <!-- /.container -->
    </div> <!-- /#services -->

    <div id="product-promotion" class="content-section">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h1 class="section-title">New Products</h1>
                </div> <!-- /.col-md-12 -->
            </div> <!-- /.row -->
            <div class="row">
                <div class="col-md-2 col-sm-3">
                    <div class="item-small">
                        <img src="{% static 'image/home/promotion/promotion1.jpg' %}" alt="Product 1">
                        <h4>Nullam Non Ultrices Arcu</h4>
                    </div> <!-- /.item-small -->
                </div> <!-- /.col-md-2 -->
                <div class="col-md-8 col-sm-6">
                    <div class="item-large">
                        <img src="{% static 'image/home/promotion/promotion2.jpg' %}" alt="Product 2">
                        <div class="item-large-content">
                            <div class="item-header">
                                <h2 class="pull-left">Fusce facilisis semper magna</h2>
                                <span class="pull-right">Rate: <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                <i class="fa fa-star-half-o"></i></span>
                                <div class="clearfix"></div>
                            </div> <!-- /.item-header -->
                            <p>Integer ac dui interdum, varius sem eu, vulputate ipsum. Donec fringilla, est ac hendrerit elementum, libero nulla sodales odio, a placerat urna lectus at sem. Vivamus vehicula accumsan orci a tempus. Vestibulum a augue iaculis, tincidunt lacus venenatis, aliquet ante. Sprint is <a href="#">free website template</a> that can be used for any purpose.<br><br>Aliquam iaculis lectus accumsan, egestas lorem ac, malesuada purus. Aenean in tincidunt libero. Etiam vitae dolor vel justo temllicitudin. Download <a rel="nofollow" href="#/free-templates">templates</a> for your websites. Sed fermentum, neque in dignissim aliquam, quam ante pellentesque quam, posuere eros purus purus. Ut non est magna.</p>
                        </div> <!-- /.item-large-content -->
                    </div> <!-- /.item-large -->
                </div> <!-- /.col-md-8 -->
                <div class="col-md-2 col-sm-3">
                    <div class="item-small">
                        <img src="{% static 'image/home/promotion/promotion3.jpg' %}" alt="Product 3">
                        <h4>Morbi Sit Amet Lorem</h4>
                    </div> <!-- /.item-small -->
                </div> <!-- /.col-md-2 -->
            </div> <!-- /.row -->
        </div> <!-- /.container -->
    </div> <!-- /#product-promotion -->
	<div class="copyrights">Collect from <a href="https://www.webmoban.net" >网页模板</a></div>
    
    <div id="contact" class="content-section">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h1 class="section-title">Contact Us</h1>
                </div> <!-- /.col-md-12 -->
            </div> <!-- /.row -->
            <div class="row">
                <div class="col-md-offset-2 col-md-8 text-center bigger-text">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, itaque vero facere laudantium voluptas temporibus mollitia nisi deleniti illo minima quisquam corporis possimus nesciunt. Accusantium modi dolores in ex officiis!</p>
                </div>
                <div class="col-md-6 col-sm-6">
                    <div id="map">
                    </div>
                </div> <!-- /.col-md-6 -->
                <div class="col-md-6 col-sm-6">
                    <div class="row contact-form">
                        <fieldset class="col-md-6 col-sm-6">
                            <input id="name" type="text" name="name" placeholder="Name">
                        </fieldset>
                        <fieldset class="col-md-6 col-sm-6">
                            <input type="email" name="email" id="email" placeholder="Email">
                        </fieldset>
                        <fieldset class="col-md-12">
                            <input type="text" name="subject" id="subject" placeholder="Subject">
                        </fieldset>
                        <fieldset class="col-md-12">
                            <textarea name="comments" id="comments" placeholder="Message"></textarea>
                        </fieldset>
                        <fieldset class="col-md-12">
                            <input type="submit" name="send" value="Send Message" id="submit" class="button">
                        </fieldset>
                    </div> <!-- /.contact-form -->
                </div> <!-- /.col-md-6 -->
            </div> <!-- /.row -->
        </div> <!-- /.container -->
    </div> <!-- /#products -->

    <div class="site-footer">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-sm-6">
                    <span>Copyright &copy; 2084 <a href="#">Fatinn</a></span>
                </div> <!-- /.col-md-6 -->
            </div> <!-- /.row -->
        </div> <!-- /.container -->
    </div> <!-- /.site-footer -->

    
    <script src="{% static 'js/home/vendor/jquery-1.10.1.min.js' %}"></script>
    <script>window.jQuery || document.write('<script src="{% static 'js/home/vendor/jquery-1.10.1.min.js' %}"><\/script>')</script>
    <script src="{% static 'js/home/jquery.easing-1.3.js' %}"></script>
    <script src="{% static 'js/home/bootstrap.js' %}"></script>
    <script src="{% static 'js/home/plugins.js' %}"></script>
    <script src="{% static 'js/home/main.js' %}"></script>
    <!--  Free HTML5 Template by https://www.webmoban.net -->
</body>
</html>